<template>
  <div class="gantt-stats">
    <div v-for="(count, status) in postStatusCount" :key="status" class="stat-item">
      <div class="stat-badge" :style="{ backgroundColor: getStatusColor(status) }" />
      <div class="stat-content">
        <div class="stat-count">
          {{ count }}
        </div>
        <div class="stat-label">
          {{ getStatusText(status) }}
        </div>
      </div>
    </div>

    <div class="stat-item">
      <div class="stat-badge bg-gray-400" />
      <div class="stat-content">
        <div class="stat-count">
          {{ posts.length }}
        </div>
        <div class="stat-label">总文章数</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGanttStore } from '@/store/modules/ganttStore';
import { storeToRefs } from 'pinia';

const store = useGanttStore();
const { postStatusCount, posts } = storeToRefs(store);

const statusColors: Record<string, string> = {
  draft: '#93c5fd',
  writing: '#fcd34d',
  review: '#a5b4fc',
  scheduled: '#c7d2fe',
  published: '#86efac',
  archived: '#d1d5db'
};

const statusTexts: Record<string, string> = {
  draft: '草稿',
  writing: '写作中',
  review: '审核中',
  scheduled: '待发布',
  published: '已发布',
  archived: '已归档'
};

const getStatusColor = (status: string) => statusColors[status] || '#d1d5db';
const getStatusText = (status: string) => statusTexts[status] || status;
</script>

<style scoped>
.gantt-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-badge {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.stat-content {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.stat-count {
  font-size: 0.875rem;
  font-weight: 500;
}

.stat-label {
  font-size: 0.75rem;
  color: #6b7280;
}
</style>
